<template>
	<view class="video-container">
		<view class="header">
			<text class="title">发布视频</text>
		</view>

		<!-- 视频上传区域 -->
		<view class="upload-area" @click="selectVideo">
			<text v-if="!videoUrl">点击上传视频</text>
			<video v-else :src="videoUrl" controls></video>
		</view>

		<!-- 标签选择 -->
		<view class="tag-selection">
			<text class="label">选择标签</text>
			<input 
				v-model="searchQuery" 
				placeholder="输入标签进行搜索" 
				@input="filterTags"
			/>
			<view class="tags">
				<view 
					v-for="(tag, index) in filteredTags" 
					:key="index" 
					class="tag-item" 
					:class="{ selected: selectedTags.includes(tag) }"
					@click="toggleTag(tag)"
				>
					{{ tag }}
				</view>
			</view>
		</view>

		<!-- 发布按钮 -->
		<button 
			class="publish-btn" 
			:disabled="!canPublish" 
			@click="publishVideo"
		>
			发布
		</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			videoUrl: '', // 视频链接
			tags: ['娱乐', '教育', '科技', '生活', '运动'], // 可选标签
			selectedTags: [], // 选中的标签
			searchQuery: '', // 搜索输入
			filteredTags: [] // 过滤后的标签
		}
	},
	computed: {
		canPublish() {
			return this.videoUrl && this.selectedTags.length > 0; // 至少选择一个标签
		}
	},
	mounted() {
		// 初始化过滤后的标签
		this.filteredTags = this.tags;
	},
	methods: {
		// 选择视频
		selectVideo() {
			uni.chooseVideo({
				success: (res) => {
					this.videoUrl = res.tempFilePath; // 获取视频链接
				}
			});
		},
		// 切换标签选择
		toggleTag(tag) {
			const index = this.selectedTags.indexOf(tag);
			if (index > -1) {
				this.selectedTags.splice(index, 1); // 取消选择
			} else {
				this.selectedTags.push(tag); // 添加选择
			}
		},
		// 发布视频
		publishVideo() {
			if (!this.canPublish) return;

			// TODO: 调用接口发布视频
			uni.showToast({
				title: '视频发布成功',
				icon: 'success'
			});
			// 清空状态
			this.videoUrl = '';
			this.selectedTags = [];
		},
		// 过滤标签
		filterTags() {
			const query = this.searchQuery.toLowerCase();
			this.filteredTags = this.tags.filter(tag => tag.toLowerCase().includes(query));
		}
	}
}
</script>

<style lang="scss">
.video-container {
	padding: 20rpx;

	.header {
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.upload-area {
		width: 100%;
		height: 200rpx;
		background-color: #f0f0f0;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px dashed #ccc;
		margin-bottom: 20rpx;
		cursor: pointer;

		video {
			width: 100%;
			height: 100%;
		}
	}

	.tag-selection {
		margin-bottom: 20rpx;

		.label {
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}

		input {
			width: 100%;
			padding: 10rpx;
			border: 1px solid #ccc;
			border-radius: 5rpx;
			margin-bottom: 10rpx;
		}

		.tags {
			display: flex;
			flex-wrap: wrap;

			.tag-item {
				background-color: #e0e0e0;
				border-radius: 20rpx;
				padding: 10rpx 15rpx;
				margin: 5rpx;
				cursor: pointer;

				&.selected {
					background-color: #007AFF;
					color: #fff;
				}
			}
		}
	}

	.publish-btn {
		width: 100%;
		height: 50rpx;
		background-color: #007AFF;
		color: #fff;
		border: none;
		border-radius: 25rpx;
		font-size: 28rpx;
		cursor: pointer;

		&:disabled {
			background-color: #ccc;
		}
	}
}
</style>
